<template>
    <div class="content-box" v-loading.fullscreen.lock="loading">
      <el-form :model="form" :rules="rules" ref="formRef" >
      <!-- 资质评分信息 -->
       <div class="pickFlairInfo">
          <div class="pf_title">资质评分信息</div>  
          <div class="content">
            <div v-for="preItem in tabInfoList" :key="preItem.props">
                <div class="top">
                    <div class="leftTag"></div>
                    <div class="righTitle">{{ preItem.label }}</div>
                </div>
                <div class="tab">
                    <template v-if="preItem.children && preItem.children.length">
                        <div 
                         v-for="childItem in preItem.children"
                         :key="childItem.props"
                         :class="['tabItem',device === 'desktop'?'twoEqualPart':'oneEqualPart']">
                           <el-form-item :label="childItem.label" :prop="childItem.props">
                            <el-input-number 
                              v-model="form[childItem.props]" 
                              controls-position="right" 
                              placeholder="请输入"
                              :min="0" 
                              :disabled="isView"
                              style="width: 100%"
                            ></el-input-number>
                           </el-form-item>
                        </div>
                    </template>
                    <template v-else>
                        <div :class="['tabItem',device === 'desktop'?'twoEqualPart':'oneEqualPart']">
                           <el-form-item :prop="preItem.props" style="margin-top: 18px;">
                            <el-input-number 
                              v-model="form[preItem.props]" 
                              controls-position="right" 
                              placeholder="请输入"
                              :min="0" 
                              :disabled="isView"
                              style="width: 100%"
                            ></el-input-number>
                           </el-form-item>
                        </div>
                    </template>
                </div>
            </div>
          
          </div>  
       </div>
    
     </el-form>
     <!--  提交按钮区域-->
     <div class="btn flex-center" v-if="!isView">
       <el-button @click="clickCancle">取 消</el-button>
       <el-button type="primary" @click="handleSubmit('formRef')">保存</el-button>
     </div>
    </div>
  </template>
  
  <script>
  import {addOrEditFlairConfig,queryFlair} from '@/api/business/upPickManagement'
  import {addOrEdit,queryConfigFlair} from '@/api/globalConfig/pickFlair'
  import { mapGetters } from "vuex";

  export default {
    name: 'PickFlair',
    data() {
      return {
        // 表单信息
        form: {
          collisionCategory:[],
          collisionType:[],
          // 结算模式设置默认值
          upRewardType:0
        },
        // 路由参数对象
        query:{
          
        },
        // 表单校验规则
        rules: {
        
        },
        // 详情信息加载状态
        loading:false,
        // tab项信息
        tabInfoList:[
            { label:'京东白条',props:'baiTiao'},
            { 
                label:'营业执照',
                props:'busLicense',
                children:[
                    { label:'两年以下',props:'busLicense1'},
                    { label:'两年以上',props:'busLicense2'}
                ]
            },
            { 
                label:'车产',
                props:'car',
                children:[
                    { label:'按揭车',props:'car1'},
                    { label:'全款车',props:'car2'}
                ]
            },
            { label:'信用评分',props:'credit'},
            {
                label:'信用卡',
                props:'creditCard',
                children:[
                    { label:'2万元以内',props:'creditCard1'},
                    { label:'2万元以上',props:'creditCard2'}
                ]
            },
            {
                label:'学历评分',
                props:'education',
                children:[
                    { label:'初中及以下',props:'education1'},
                    { label:'高中',props:'education2'},
                    { label:'大专',props:'education3'},
                    { label:'本科',props:'education4'},
                    { label:'研究生及以上',props:'education5'}
                ]
            },
            {
                label:'公积金',
                props:'fund',
                children:[
                    { label:'6个月以下',props:'fund1'},
                    { label:'6个月及以上',props:'fund2'}
                ]
            },
            {
                label:'房产',
                props:'house',
                children:[
                    { label:'按揭房',props:'house1'},
                    { label:'全款房',props:'house2'}
                ]
            },
            { label:'花呗',props:'huaBei'},
            { label:'二要素验证',props:'isUser'},
            {
                label:'保险保单',
                props:'policy',
                children:[
                    { label:'1年以内',props:'policy1'},
                    { label:'1年以上',props:'policy2'}
                ]
            },
            {
                label:'芝麻分',
                props:'sesame',
                children:[
                    { label:'600~649分',props:'sesame3'},
                    { label:'650~699分',props:'sesame4'},
                    { label:'700分以上',props:'sesame5'}
                ]
            },
            {
                label:'社保',
                props:'social',
                children:[
                    { label:'6个月以下',props:'social1'},
                    { label:'6个月及以上',props:'social2'},
                ]
            },
            {
                label:'工资发放形式',
                props:'wage',
                children:[
                    { label:'银行卡',props:'wage1'},
                    { label:'现金',props:'wages2'},
                    { label:'银行转账',props:'wages3'},
                    { label:'微信、支付宝',props:'wages4'},
                ]
            },


        ]
      };
    },
    created(){
      this.query = this.$route.query
      // 获取资质评分详细信息
      this.getPickFlairById(this.$route.query?.upProductId || null)
        
    },
    computed:{
       ...mapGetters(["device"]),
       // 将数组转换为对象形式
       ArrayFormatObj:()=>{
          return (arr)=>{
            return arr.reduce((pre, cur)=>{
              pre[cur.value] = cur.label;
              return pre;
            },{})
          }
       },
      // 判断当前是否处于查看操作
      isView(){
        return this.query?.type == "view"
      },
    },
    methods: {
       // 根据资质评分id查询资质评分详细信息
       getPickFlairById(upProductId=null){ 
        this.loading = true;
         [this?.query?.upProductId?queryFlair:queryConfigFlair][0](upProductId).then(res=>{
            console.log(res);
            setTimeout(()=>{
              this.form = res?.data
              this.loading = false 
            },1000)
         })
       },
     
      // 切换选择器删除控制的属性
      changeSelect(prop,defalutValue){
        // 如果是数组则循环删除
        if(Array.isArray(prop)){
          prop.forEach(item=>{
            this.deleteProp(item,defalutValue)
          })
        }else{
          this.deleteProp(prop,defalutValue)
        }
      },
      deleteProp(prop,defalutValue){
        if(prop === null) return
         if(prop.includes('.')){
              let [key,value] = prop.split('.')
              if(defalutValue){
                this.$set(this.form[key],value,defalutValue)
                return
              }
              this.$delete(this.form[key],value)
              return
          }
          this.$delete(this.form,prop)
      },
      clickCancle(){
        this.$message.info('取消操作')
        // 关闭当前页签
        this.$store.dispatch('tagsView/delView', this.$route)
        // 返回上一个页面
        this.$router.go(-1)
      },
      /*重置变动数据*/
      remeitForm(){
        this.$refs['formRef'].resetFields();
        this.form = this.$options.data().form;
      },
      /*提交操作*/
      handleSubmit(formName){
        let vue =this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params={};
            params = JSON.parse(JSON.stringify(this.form))
            // 设置上游产品id
            if(this?.query?.upProductId){
              params.upProductId = this?.query?.upProductId
            }
            console.log(params);
            // 若this?.query?.id不存在表示新增,否则为编辑
            [this?.query?.upProductId?addOrEditFlairConfig:addOrEdit][0](params).then(res=>{
                if(res.code === 200) {
                  this.$message.success('操作成功')
                  // 获取资质评分详细信息
                  vue.getPickFlairById(vue.query?.upProductId || null)
                }
              })
          }
        })
      },
    }
  };
  </script>
  
  <style scoped lang='scss'>
  .pf_title{
    color: #409EFF;
    font-weight: 500;
  }
  .content{
    margin: 20px 0 20px;
    padding: 20px  20px 0;
    background: #fff;
    align-items: flex-start;
    border-radius: 6px;
    .top{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #409EFF;
        .leftTag{
            background-color: #409EFF;
            width: 6px;
            height: 15px;
            margin-right: 10px;
        }
    }
    .tab{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .tabItem{
           
        }
    }
  }
  // 二等分样式
  .twoEqualPart{
    flex: 1 1 50%; // 每个子盒子占 50% 的宽度，最多 2 个子盒子一行
    max-width: 50%;
    &:nth-child(2n+1){
        padding-right: 20px;
    }
    &:nth-child(2n){
        padding-left: 20px;
    }
  }
  // 三等分样式
  .threeEqualPart{
    flex: 1 1 33.33%;
    max-width: 33.33%;
    &:nth-child(2n){
        padding:0 30px;
    }
  }
  // 一等分样式
  .oneEqualPart{
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
  }
  </style>
  